<template>
  <div class="ms-list">
    <el-row class="operation">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">
          <icon style="" name="home"></icon>
        </el-breadcrumb-item>
        <el-breadcrumb-item>财务管理</el-breadcrumb-item>
        <el-breadcrumb-item>消费分析</el-breadcrumb-item>
        <el-breadcrumb-item>项目平台消费图表</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>

    <ms-search :data="search.list" @click="updateConditions"></ms-search>

    <ve-line :data="data" :mark-line="markLine" :mark-point="markPoint" :title="title"
             :loading="chartLoading" :data-empty="dataEmpty" :settings="chartSetting"></ve-line>
  </div>
</template>

<script>
  import MsSearch from '@/components/common/Search.vue'
  import { SEARCH_CONDITION } from '@/models/customer/platform-month-consumption'
  import { PLATFORM_LIST } from '@/utils/constants'

  export default {
    components: {
      MsSearch
    },
    created () {
      this.chartLoading = true
      if (this.$route.query.search !== undefined) {
        this.search.list = this.$route.query.search.list
        this.search.condition = this.$route.query.search.condition
        let year = this.search.condition.year
        let dataType = this.search.condition.dataType || 1

        this.title.text = year + '年-项目平台消费图表'
        if (this.$route.query.data !== undefined) {
          this.chartData = this.$route.query.data
          this.data.columns = ['month']
          let platforms = {}
          PLATFORM_LIST.forEach(item => {
            platforms[item.id] = item.title
          })
          let columns = {}
          for (let i = 1; i <= 12; i++) {
            let key1 = year * 100 + i
            let record = {}
            record['month'] = i
            for (let key in this.chartData.month) {
              let itemId = key.split('_')[0]
              let platformId = key.split('_')[1]
              if (this.chartData.month[key][key1] !== undefined) {
                let column = this.chartData.items[itemId].title + '_' + platforms[platformId]
                columns[key] = column
                record[column] = this.chartData.month[key][key1][this.dataType[dataType]]
              }
            }
            this.data.rows.push(record)
          }
          for (let key in columns) {
            this.data.columns.push(columns[key])
          }
          if (this.data.columns.length <= 1) {
            this.data.columns.push(columns[1] = '无相关数据')
          }
        } else {
          this.dataEmpty = true
        }
      } else {
        this.search.list = SEARCH_CONDITION
        this.dataEmpty = true
        this.title.text = ''
      }
      this.chartLoading = false
    },
    data () {
      return {
        search: {
          list: [],
          condition: {}
        },
        data: {
          columns: [],
          rows: []
        },
        chartData: {},
        title: {},
        chartLoading: true,
        dataEmpty: false,
        markLine: {
          data: [
            {type: 'average', name: '平均值'}
          ]
        },
        chartSetting: {
          nullAddZero: true
        },
        markPoint: {
          data: [
            {type: 'max', name: '最大值'},
            {type: 'min', name: '最小值'}
          ]
        },
        dataType: {
          1: 'costCoin',
          2: 'costMoney',
          3: 'serviceCoin'
        }
      }
    },
    methods: {
      updateConditions (conditions) {
        this.search.condition = conditions
        this.$router.push({path: '/customer/item-platform-month-consumption-line', query: {search: this.search}})
      }
    }
  }
</script>
